import React from 'react';
import { Table, Card, message, Input, Select } from 'antd';
import SearchForm from '../../components/AutoForm/SearchForm';
import { connect } from 'dva';

const searchFieldsPay = [
  {
    cols: [
      {
        md: 6,
        label: '车牌号',
        name: 'carNo',
        component: <Input placeholder="请输入车牌号" />,
      },
      {
        md: 6,
        label: '司机姓名',
        name: 'driver',
        component: <Input placeholder="请输入司机姓名" />,
      },
      {
        md: 6,
        label: 'load号',
        name: 'loadNo',
        component: <Input placeholder="请输入load号" />,
      },
      {
        md: 6,
        label: '费用状态',
        name: 'status',
        component: (
          <Select placeholder="请输入费用状态">
            <Option value="APPLY_PAY">申请支付</Option>
            <Option value="PAY">支付</Option>
            <Option value="PAY_ALLOW">可支付</Option>
          </Select>
        ),
      },
    ],
  },
];

// 表格列信息
const columnsPay =  [
  {
    title: '车牌号',
    dataIndex: 'carNo',
    width: '90px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '司机姓名',
    dataIndex: 'driver',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '司机电话',
    dataIndex: 'drPhone',
    width: '110px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '司机身份证',
    dataIndex: 'drIdcard',
    width: '120px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '账户姓名',
    dataIndex: 'accountName',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '银行卡号',
    dataIndex: 'bankAccount',
    width: '120px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '费用状态',
    dataIndex: 'status',
    width: '80px',
    render: text => {
      switch (text) {
        case 'ENTRY':
          return <span>生成</span>;
        case 'APPLY':
          return <span>申请</span>;
        case 'PASS':
          return <span>通过</span>;
        case 'APPLY_PAY':
          return <span>申请支付</span>;
        case 'PAY':
          return <span>支付</span>;
        case 'PAY_FINISH':
          return <span>支付完成</span>;
        case 'CANCEL':
          return <span>作废</span>;
        default:
          return <span />;
      }
    },
  },
  {
    title: '实际车型',
    dataIndex: 'realCarType',
    width: '75px',
  },
  {
    title: '实际体积',
    dataIndex: 'realVoPrice',
    width: '75px',

  },
  {
    title: '实际重量',
    dataIndex: 'realWePrice',
    width: '75px',
  },
  {
    title: '合计',
    dataIndex: 'feeSum',
    width: '75px',
  },
  {
    title: '提货费',
    dataIndex: 'pickFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '干线费',
    dataIndex: 'arteryFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '送货费',
    dataIndex: 'dropoffFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '加点费',
    dataIndex: 'workoverFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '装货费',
    dataIndex: 'loadupFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '卸货费',
    dataIndex: 'loadoffFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '包车费',
    dataIndex: 'carFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '燃油补助费',
    dataIndex: 'fuelFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '加班费',
    dataIndex: 'callbackFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '押车费',
    dataIndex: 'escortinFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '小费',
    dataIndex: 'tipFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
  {
    title: '短驳费',
    dataIndex: 'shuttleFee',
    width: '75px',
    editable: true,
    ellipsis: true,
  },
];

@connect(({ auditCost, loading }) => ({
  tableLoadingC: loading.effects['auditCost/page'],
  tableDataC: auditCost.childrenTable,
  columnsC: auditCost.columnsChlidren,

  tableLoading: loading.effects['auditCost/page'],
  tableData: auditCost.pageList,
  pagination: auditCost.pagination,
  searchValues: auditCost.searchValueAuditPay,
  editId: auditCost.editId,
  selectionIds: auditCost.selectionIds,
  selectedRows: auditCost.selectedRows,
  selectionOrderIds: auditCost.selectionOrderIds,
}))
export default class EditableTable extends React.Component {
  rowClassName = (record, index) => {
    if (record.status === 'APPLY_PAY') {
      return 'orderParent';
    }
  };

  state = {
    sumText: '选中合计费用：0',
  };

  componentDidMount() {
    this.handleSearch();
  }

  expandedRowRender = record => {
    const { columnsC } = this.props;
    return <Table size="small" columns={columnsC} dataSource={record.orders} pagination={false} />;
  };

  handleSearchChange = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'auditCost/handlePayAuditSearchChange',
      payload: fields,
    });
  };

  handleAdd = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'auditCost/handleAdd',
    });
  };

  handleSearch = (flag) => {
    const { dispatch, pagination, searchValues } = this.props;
    let pageParam = { pageSize: pagination.pageSize, current: flag==='btn' ? 1 : pagination.current };
    let searchParam = {};
    Object.keys(searchValues).map(key => {
      searchParam[key] = searchValues[key]['value'];
    });
    const param = {
      ...searchParam,
      ...pageParam,
      flag: 'urgentPay',
    };
    dispatch({
      type: 'auditCost/page',
      payload: param,
    });
  };

  onChange = (selectedRowKeys, selectedRows) => {
    const { dispatch } = this.props;
    let sum = 0.0;
    selectedRows.forEach(row => {
      sum += row.feeSum;
    });
    this.setState({ sumText: `选中合计费用：${sum}` });
    dispatch({
      type: 'auditCost/handleSelection',
      payload: { selectedRowKeys, selectedRows },
    });
  };

  onSend = () => {
    const { dispatch, selectedRows } = this.props;
    if (!selectedRows.length) {
      return message.error('请选择要提交的数据');
    }
    selectedRows.forEach(row => {
      row.status = 'PAY';
    })
    dispatch({
      type: 'auditCost/audit',
      payload: selectedRows,
    }).then(() => {
      this.handleSearch();
    });
  };

  onReject = () => {
    const { dispatch, selectedRows } = this.props;
    if (selectedRows.length !== 1) {
      return message.error('请选择一行数据');
    }
    selectedRows[0].status = 'REJECT_PAY';
    dispatch({
      type: 'auditCost/audit',
      payload: selectedRows,
    }).then(() => {
      this.handleSearch();
    });
  };

  render() {
    const { pagination, tableLoading, tableData, searchValues, editId, dispatch } = this.props;
    const optColumns = columnsPay.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: editId === record.id,
        }),
      };
    });

    pagination.onChange = (page, pageSize) => {
      let searchParam = {};
      Object.keys(searchValues).map(key => {
        searchParam[key] = searchValues[key]['value'];
      });
      dispatch({
        type: 'auditCost/page',
        payload: {
          ...searchParam,
          current: page,
          flag: 'urgentPay',
          pageSize,
        },
      });
    };
    pagination.onShowSizeChange = (current, size) => {
      let searchParam = {};
      Object.keys(searchValues).map(key => {
        searchParam[key] = searchValues[key]['value'];
      });
      dispatch({
        type: 'auditCost/page',
        payload: {
          ...searchParam,
          current: current,
          flag: 'urgentPay',
          pageSize: size,
        },
      });
    };

    const rowSelection = {
      type: 'checkbox',
      selections: this.props.selectedRows,
      selectedRowKeys: this.props.selectionIds,
      onChange: this.onChange,
    };

    return (
      <Card bodyStyle={{ padding: 0 }}>
        <SearchForm
          header="审核支付->操作"
          layout="inline"
          onFieldsChange={this.handleSearchChange}
          isAdd={false}
          isDel={false}
          isReject={true}
          onReject={this.onReject}
          onAdd={this.handleAdd}
          onSend={this.onSend}
          onSubmit={() => {this.handleSearch('btn')}}
          onDel={this.onDel}
          isSend={true}
          isSum={true}
          sumText={this.state.sumText}
          fields={searchFieldsPay}
          fieldValue={searchValues}
        />

        <Table
          bordered
          rowKey="id"
          loading={tableLoading}
          dataSource={tableData}
          columns={optColumns}
          rowSelection={rowSelection}
          rowClassName={this.rowClassName}
          scroll={{ x: 'max-content' }}
          size="small"
          pagination={pagination}
          expandedRowRender={this.expandedRowRender}
        />
      </Card>
    );
  }
}
